<template>
  <div class="r-echarts-line">
    <div class="top">
      <div class="title">
        {{origin.title}}
      </div>
      <div class="select-list">
        <Select style="width:120px;margin-right:.5rem" v-model="pagePick">
          <Option v-for="item in origin.page_select" :key="item" :value="item.val">{{item.name}}</Option>
        </Select>
        <Select style="width:120px" v-model="typePick">
          <Option v-for="item in typeList" :value="item.name" :key="item">{{item.name}}</Option>
        </Select>
      </div>
    </div>
    <div class="des">说明：符合于本次筛选条件的共有<span class='tips'>{{origin.desc}}</span>条<span style="font-weight:700;color:black">职位信息</span>。
    </div>
    <div class="bottom" id="echart" ref="mychart"></div>
  </div>
</template>

<script>
  // echarts相关
  let echarts = require('echarts/lib/echarts');
  require('echarts/lib/chart/bar');
  require('echarts/lib/component/tooltip');
  require('echarts/lib/component/toolbox');
  require('echarts/lib/component/legend');
  require('echarts/lib/component/markLine');

  export default {
    name: 'r-echarts-line',
    data () {
      return {
        typePick: '数值',
        typeList: [
          {
            name: '数值'
          },
          {
            name: '百分比'
          }
        ],
        pagePick: 0,
        // myChart实例
        myChart: {},
        percent: {
          label: {
            normal: {
              show: true,
              position: 'inside',
              formatter: '{c}%'
            }
          }
        },
        numeric: {
          label: {
            normal: {
              show: true,
              position: 'inside',
              formatter: '{c}'
            }
          }
        }
      }
    },
    props: {
      index: {
        required: true,
        type: Number
      },
      data: {
        required: true,
        type: Object
      }
    },
    mounted () {
      this.setEchart();
    },
    updated () {
      if (!this.myChart) {
        this.setEchart();
      }
      this.chartChange();
    },
    computed: {
      origin () {
        return this.data;
      },
      opt() {
        let that = this;
        let obj = {
          color: ['#606c94'],
          tooltip: {},
          toolbox: {
            show: true,
            feature: {
              saveAsImage: {show: true}
            }
          },
          label: {
            normal: {
              show: true,
              position: 'inside',
              formatter: '{c}'
            },
            emphasis: {
              show: true
            }
          },
          xAxis: {
            type: 'value',
          },
          yAxis: {
            data: that.origin[that.type][that.pagePick].key,
            axisLabel: {
              interval: 0,
              rotate: -30
            }
          },
          series: [{
            name: that.origin.title,
            type: 'bar',
            data: that.origin[that.type][that.pagePick].val,
            barMaxWidth: '30',
            markLine: {
              data: [
                {type: 'average', name: '平均值'}
              ]
            }
          }]
        }
        return obj;
      },
      type () {
        if (this.typePick == '数值') {
          return 'numeric';
        } else if (this.typePick == '百分比') {
          return 'percent';
        } else {
          return 'numeric';
        }
      }
    },
    methods: {
      setEchart () {
        let dom = this.$refs.mychart;
        this.myChart = echarts.init(dom);
        this.myChart.setOption(this.opt);
      },
      chartChange () {
        this.myChart.setOption(this.opt);
        if (this.typePick == '百分比') {
          this.myChart.setOption(this.percent);
        }
        if (this.typePick == '数值') {
          this.myChart.setOption(this.numeric);
        }
      }
    }
  }
</script>
